import React, { useState, useEffect, useRef } from 'react';
import { flushSync } from 'react-dom';
import { LockOutlined, MobileOutlined, UserOutlined } from '@ant-design/icons';
import { LoginForm, ProFormCaptcha, ProFormCheckbox, ProFormText } from '@ant-design/pro-components';
import { history, useSearchParams, useModel, Helmet } from '@umijs/max';
import { message, Tabs } from 'antd';
import styled from 'styled-components';
import Footer from '@/components/Footer';
import BASE_API from '@/services/base';
import md5 from 'blueimp-md5';
import _ from '@/assets/utils';

/* 组件样式 */
const StyledLoginBox = styled.div`
    display: flex;
    flex-direction: column;
    width: 420px;
    margin:0 auto;
    height: 100vh;
    overflow: hidden;
    /* background-image: url('https://mdn.alipayobjects.com/yuyan_qk0oxh/afts/img/V-_oS6r-i7wAAAAAAAAAAAAAFl94AQBr'); */
    /* background-size: 100% 100%; */
    .form-box{
        margin-top: 90px;
        /* border: black solid 1px; */
        flex: 1;
        height: 500px;
        padding: 32px 0;
        text-align:center;
        position: relative;
    }
    .remember{
        position: absolute;
       top: 420px;
       left: 60px;
      .ant-form-item-control-input{
        span{
            color: #1baeae;
        }
      }
    }
    .ant-pro-form-login-main{
        min-width: 280px;
        max-width: 75vw;
    }
   .ant-pro-form-login-top   {
    margin-bottom:50px
   }
    
    .ant-pro-form-login-logo {
        width:100px;
            height: 100px;
        img{
            width:100px;
            height: 100px;
        }
    }
    .bbb{
        width: 420px;
    height: 500px;
    border-radius: 4px;
    box-shadow: 0 21px 41px 0 rgb(0 0 0 / 20%);
    position: absolute;
    top: 110px;
    }
    .ant-pro-form-login-title {
        font-size: 28px;
    color: #1baeae;
    font-weight: 700;
    margin-bottom:18px;
    }
    .ant-pro-form-login-desc {
        font-size: 12px;
    color: #999;
    position:absolute;
    top: 78px;
    left: 216px;
    }
    .ant-input-affix-wrapper {
        border-radius: 4px!important;;
    border: 1px solid #dcdfe6;
    box-sizing: border-box;
    color: #606266;
    height: 40px;
    padding: 0 15px;
    width: 300px;
    }
    .aaa{
        position: absolute;
        top: 340px;
        left: 60px;
        span{
            color: #409eff;
        }
    }
    .ant-btn {
        position: absolute;
        top: 374px;
        left: 60px;
        color: #fff;
    background-color: #1baeae;
    border-color: #1baeae;
    box-sizing: border-box;
    text-align: center;
    font-weight: 500;
    font-size: 14px;
    border-radius: 4px!important;
    width: 294px!important;
    height: 40px;
    &:hover{
        background-color:#49bebe;
    }
    }
   
`;

let passwordMD5 = '';
const Login = function Login() {
    /* 定义需要的状态 */
    // 控制选项卡切换
    const [type, setType] = useState('account');
    // 获取初始状态「公共」
    const { initialState, setInitialState } = useModel('@@initialState');
    // 解析传递的问号参数
    const [usp] = useSearchParams();

    /* 组件第一次渲染 */
    let formIns = useRef(),
        char = '······';
    useEffect(() => {
        let remember = _.storage.get('remember');
        if (!remember) return;
        let { account, password } = remember;
        formIns.current.setFieldsValue({
            account,
            password: char
        });
        passwordMD5 = password;
    }, []);

    /* 登录提交 */
    const submit = async (values) => {
        let { account, password, autoLogin } = values;
        if (password === char) {
            password = passwordMD5;
        } else {
            password = md5(password);
        }

        try {
            let { resultCode, data } = await BASE_API.adminUserLogin(account, password);
            if (+resultCode !== 200) {
                message.error('很遗憾，登录失败，请稍后再试~');
                return;
            }
            // 登录成功：@1 存储Token信息
            _.storage.set('tk', data);
            // 登录成功：@2 获取登录者信息，存储到@@initialState中
            let profile = await BASE_API.adminUserProfile();
            if (+profile.resultCode !== 200) {
                message.error('获取登录者信息失败，请稍后再试~');
                return;
            }
            flushSync(() => {
                // 只有立即更新状态后，才能进行后续的步骤
                setInitialState({
                    ...initialState,
                    currentUser: profile.data
                });
            });
            // 登录成功：@3 存储账号和密码
            if (autoLogin) {
                _.storage.set('remember', {
                    account,
                    password
                });
            } else {
                _.storage.remove('remember');
            }
            // 登录成功：@4 提示和跳转
            message.success('恭喜您，登录成功啦~');
            let to = usp.get('to');
            to ? history.replace(to) : history.push('/');
        } catch (_) { }
    };

    return <StyledLoginBox>
        {/* 设置页面的标题 */}
        <Helmet>
            <title>登录</title>
        </Helmet>
        
        <div className="bbb"></div>
        {/* 表单区域 */}
        <div className='form-box'>
            <LoginForm
                title="新蜂商城"
                subTitle="Vue3.0 后台管理系统"
                logo={<img alt="logo" src="https://s.weituibao.com/1582958061265/mlogo.png" />}
                initialValues={{
                    autoLogin: true,
                    account: '',
                    password: ''
                }}
                onFinish={submit}
                formRef={formIns}
            >
<div className='aaa'>登录表示您已同意<span>《服务条款》</span></div>
                {/* 账号密码登录 */}
                {type === 'account' && (
                    <>

                        <ProFormText
                            name="account"
                            label="账号"
                            placeholder=""
                            rules={[
                                { required: true, message: "账号不能为空" }
                            ]}
                        />
                        <ProFormText.Password
                            name="password"
                            label="密码"
                            placeholder=""
                            rules={[
                                { required: true, message: "密码不能为空" }
                            ]}
                        />
                    </>
                )}



                <div className='remember'>
                    <ProFormCheckbox name="autoLogin">下次自动登录</ProFormCheckbox>
                </div>
            </LoginForm>
        </div>

        {/* 尾部 */}
        {/* <Footer /> */}
    </StyledLoginBox>;
};
export default Login;